<template>
  <div class="item">
    <img :src="item.img" alt="" />
    <p>
      {{ item.title }} <span class="icon">{{ item.content.length || "" }}</span>
    </p>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
export default {
  props: ["item"],
  setup(props, ctx) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const data = reactive({});

    return { ...toRefs(data) };
  },
};
</script>

<style lang="scss">
.item {
  height: 100px;
  border-radius: 10px;
  background: #fff;
  margin: 20px 0;
  display: flex;

  img {
    width: 100px;
    height: 100px;
  }
  p {
    position: relative;
  }
  .icon {
    position: absolute;
    right: -10px;
    top: -3px;
    color: red;
  }
}
</style>
